import React, { PureComponent } from 'react';

class TextOverFlow extends PureComponent {
  render() {
    const { text, lineClampNum = 2, maxWidth = 180 } = this.props;
    return (
      <span
        style={{
          maxWidth,
          lineClamp: lineClampNum,
          WebkitLineClamp: lineClampNum,
          boxOrient: 'vertical',
          WebkitBoxOrient: 'vertical',
          display: '-webkit-box',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
        }}
        title={text || text === 0 ? text : '--'}
      >
        {text || text === 0 ? text : '--'}
      </span>
    );
  }
}

export default TextOverFlow;
